<template>
    <div class="public-box">
        <div class="header-btn">
            <el-button class="btn add-users" type="primary" @click="handleAddUsersClick">添加权限</el-button>
        </div>
        <el-table
            :data="permissionDialogTableData"
            border
            ref="permissionTable"
            style="width: 100%"
            class="el-table-public"
            height="100%">
            <!-- <el-table-column
                type="selection"
                width="35">
            </el-table-column> -->
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="用户组"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="90">
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加权限" :visible.sync="addPermissionDialog">
            <el-form :model="addPermissionForm" :label-width="formLabelWidth">
                <el-form-item label="权限名称：" >
                    <el-input v-model="addPermissionForm.name"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addPermissionDialog = false">确 定</el-button>
                <el-button @click="addPermissionDialog = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'vue',
    data() {
        return {
            permissionDialogTableData: [
                {
                    date: '2016-05-02',
                    name: '权限1',
                    address: '上海市普陀区金沙江路 1518 弄',
                    status: 0
                }, {
                    date: '2016-05-04',
                    name: '权限2',
                    address: '上海市普陀区金沙江路 1517 弄',
                    status: 1
                }, {
                    date: '2016-05-01',
                    name: '权限3',
                    address: '上海市普陀区金沙江路 1519 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限4',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限5',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限6',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限7',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限8',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限9',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限10',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '权限11',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限12',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '权限13',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '权限14',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '权限15',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }, {
                    date: '2016-05-03',
                    name: '权限16',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 0
                }, {
                    date: '2016-05-03',
                    name: '权限17',
                    address: '上海市普陀区金沙江路 1516 弄',
                    status: 1
                }
            ],
            addPermissionDialog: false,
            addPermissionForm: {
                name: ''
            },
            formLabelWidth: '80px'
        }
    },
    props: {

    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    methods: {
        // !添加权限点击事件
        handleAddUsersClick () {
            this.addPermissionDialog = true;
        },
        // !关联权限点击事件--(批量)
        handleRelevancesClick () {
            let selectionData = this.$refs.usersTable ? this.$refs.usersTable.selection : [];
            let relevancesData = []; // 筛选未关联的数据
            selectionData.forEach(item => {
                if (item.status) {
                    relevancesData.push(item)
                }
            });
            console.log(relevancesData)
        },
         // !用户组解除关联点击事件--(批量)
        handleRelieveRelevancesClick () {
            let selectionData = this.$refs.usersTable ? this.$refs.usersTable.selection : [];
            let relieveRelevancesData = []; // 筛选已关联的数据
            selectionData.forEach(item => {
                if (!item.status) {
                    relieveRelevancesData.push(item)
                }
            });
            console.log(relieveRelevancesData)
        },
        // !用户组编辑点击事件
        handleUpdateClick (row) {
            this.addPermissionDialog = true;
            this.addPermissionForm.name = row.name;
            console.log(this.addPermissionForm)
        },
        // !用户组删除点击事件
        handleDeleteClick (row) {
            console.log(row)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style scoped lang="less">

 
</style>
